<template>
    <div class="Anime-options">
        <div class="label">
            <span>{{ label }}：</span>
        </div>
        <div class="option-content">
            <el-scrollbar>
                <div class="scrollbar-flex-content">
                    <el-button v-for="option in options" :key="option"
                        :class="{ 'highlight': option === selectedOption.value }" @click="Tag(option)"
                        class="scrollbar-option-button">{{ option }}
                    </el-button>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>
  
<script>
import debounce from '@/js/debounce';

export default {
    props: {
        label: String,
        options: Array
    },
    setup(props) {
        const selectedOption = reactive([]);

        const Tag = debounce((option) => {
            console.log(option);
            selectedOption.value = option;
        })

        return {
            ...props,
            selectedOption,
            Tag
        };
    }
};
</script>
  
<style scoped>
/* 条件筛选 */
.Anime-options {
    width: auto;
    height: fit-content;
    color: #f1f1f1;
}

.scrollbar-option-button {
    height: 25px;
    margin: 12.5px 8px;
    color: #f1f1f1;
    background-color: #409eaa;
}

.scrollbar-option-button:hover {
    background-color: #73bfc8;
}
</style>